<!-- 报名记录 -->
<script setup lang="ts">
import { useLoadMore } from 'vue-request'
import { useUserInfoStore } from '@/store/userInfo'
import { fetchRegistrationRecordAPI } from '@/apis/fetchRegistrationRecord'

const router = useRouter()
const userInfoStore = useUserInfoStore()

// 分页列表数据
const { dataList, loading, loadingMore, noMore, loadMore } = useLoadMore<LoadMoreData<Class>>(
  fetchRecord,
  { isNoMore: d => d?.list.length === d?.total },
)

// “加载更多”的状态
const loadMoreStatus = computed(() => {
  if (loadingMore.value)
    return 'loading'
  else if (noMore.value)
    return 'nomore'
  else
    return 'loadmore'
})

onReachBottom(() => loadMore())

/**
 * @description 分页服务函数
 */
async function fetchRecord(d?: LoadMoreData<Class>): Promise<LoadMoreData<Class>> {
  // 当前页数
  const _page = d?.page ? d.page + 1 : 1

  try {
    const res = await fetchRegistrationRecordAPI({
      page: _page.toString(),
      limit: '10',
    }, userInfoStore.userInfo!.token!)

    return {
      list: res.data?.data.data || [],
      page: _page,
      total: res.data?.data.total || 9999,
    }
  }
  catch (err) {
    uni.showToast({ title: JSON.stringify(err) })
  }

  return {
    list: [],
    page: 0,
    total: 9999,
  }
}

/**
 * @description 点击某一条报名记录时触发
 */
function handleTapRegistrationCard(id: string) {
  router.push({
    name: 'registrationDetail',
    params: { id },
  })
}
</script>

<template>
  <Spacer height="40" />
  <uv-list :custom-style="{ background: 'transparent' }">
    <view v-for="c in dataList" :key="c.id" :style="{ borderRadius: '20rpx', marginBottom: '20rpx' }">
      <RecordItem
        :picture="c.images!"
        :title="c.title || '未知标题'"
        :org="c.place || '未知'"
        :created-at="c.start_time || '未知时间'"
        @tap="handleTapRegistrationCard(c.id.toString())"
      />
    </view>
    <!-- 加载更多 -->
    <uv-load-more v-if="dataList.length > 3" :status="loadMoreStatus" @loadmore="loadMore" />
  </uv-list>
  <Spacer height="80" />
  <PageDefault v-if="dataList.length === 0">
    暂无报名记录
  </PageDefault>
  <uv-loading-page :loading="loading && !loadingMore" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'registrationRecord'
style:
  navigationBarTitleText: '报名记录'
</route>
